<%@   page   language="java"   import="java.util.*"   pageEncoding="UTF-8"%> 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>添加复杂内容的信息窗口</title>
</head>
<script type="text/javascript">

var image2 = new BMap.Icon('../images/jxwd.jpg', new BMap.Size(40, 50), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 ) // 设置图片偏移
});



function show(){
var map = new BMap.Map("allmap");
map.addControl(new BMap.NavigationControl());//鼠标平移缩放控件
map.addControl(new BMap.OverviewMapControl());//右下角可视控件
map.addControl(new BMap.MapTypeControl()); //地图类型控件
map.enableScrollWheelZoom();// 启用滚轮放大缩小
var markers = [];
for(var i = 0; i < 3;i++){
var lat = 116.404+i*0.01;
var lot = 39.915+i*0.01;
//alert(lat+":"+lot);
var point = new BMap.Point(lat, lot);//创建坐标点的位置
//var  latlng3 = new BMap.LatLng(lat,lot);
var marker = new BMap.Marker(point,{icon:image2});//标记坐标点
map.centerAndZoom(point, 15);
markers.push(marker);
map.addOverlay(marker);//显示图标
(function(){
var index = i;
markers[index].addEventListener('click', function(){
this.openInfoWindow(new BMap.InfoWindow('我是第'+ (index +1) +'个标注'));
}); 
})();
}

for(i = 3; i < 6;i++){
var lat = 116.404+i*0.01;
var lot = 39.915+i*0.01;
var point = new BMap.Point(lat, lot);//创建坐标点的位置
var marker = new BMap.Marker(point);//标记坐标点
var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
map.centerAndZoom(point, 15);
map.addOverlay(marker);//显示图标
marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);
   //图片加载完毕重绘infowindow
   document.getElementById('imgDemo').onload = function (){
       infoWindow.redraw();
   }
});

var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" + 
"</div>";

}

}




</script>
<body onload="show(); ">
<div id="allmap"></div>
</body>
</html>

 

